<template>
    <div class="user">
        <div class="top">
            <el-input v-model.trim="userName" placeholder="请输入用户名"></el-input>
            <el-input v-model.trim="userTel" placeholder="请输入手机号"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="find">查找</el-button>
            <el-button type="primary"><i class="el-icon-download el-icon--left" @click="down"></i>导出</el-button>
        </div>
        <div class="tab">
            <el-table :data="tableData" style="width: 100%" border fit align="center">
                <el-table-column prop="id" label="用户名ID" width="120" sortable align="center">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="200" align="center">
                </el-table-column>
                <el-table-column prop="tel" label="手机号" align="center">
                </el-table-column>
                <el-table-column label="性别" align="center">
                    <el-tag effect="dark">
                        未知
                    </el-tag>
                </el-table-column>
                <el-table-column label="生日" align="center">
                </el-table-column>
                <el-table-column label="用户等级" align="center">
                    <el-tag effect="dark">
                        普通用户
                    </el-tag>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <el-tag effect="dark">
                        可用
                    </el-tag>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="20"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { userList } from "@/api/users"
export default {
    name: 'user',
    data() {
        return {
            userName: '',
            userTel: '',
            tableData: [],
            page: 1,
            limit: 20,
            sort: 'add_time',
            order: 'desc',
            total: 1,
            currentPage4: 1
        }
    },
    props: [],
    components: {},
    methods: {
        getList() {
            userList({ page: this.page, limit: this.limit, sort: this.sort, order: this.order }).then(res => {
                console.log(res);
                if (res.errno == 0) {
                    this.tableData = res.data.items
                    this.total = res.data.total
                }
            })
        },
        handleSizeChange(val) {
            this.limit = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.page = val
            this.getList()
        },
        //查找
        find() {
            if (this.userName) {
                userList({ page: this.page, limit: this.limit, sort: this.sort, order: this.order, username: this.userName }).then(res => {
                    console.log(res);
                    if (res.errno == 0) {
                        this.tableData = res.data.items
                        this.total = res.data.total
                    }
                })
            } else if (this.userTel) {
                userList({ page: this.page, limit: this.limit, sort: this.sort, order: this.order, username: this.userName, mobile: this.userTel }).then(res => {
                    console.log(res);
                    if (res.errno == 0) {
                        this.tableData = res.data.items
                        this.total = res.data.total
                    }
                })
            } else if (!this.userTel && !this.userTel) {
                this.getList()
            }
        },
        // 下载
        down() {

        }
    },
    created() {
        this.getList()
    }
}

</script>
<style  scoped>
.user {
    margin: 20px 20px;
    position: relative
}

.top .el-input {
    width: 200px;
    margin-right: 5px;
}

.top button {
    margin-right: 10px;
}

.tab {
    margin-top: 20px;
}

.block {
    margin-left: 20px;
    margin-top: 20px;
}
</style>